{% extends "base.html" %}
{% block title %}Edit Links {% endblock title %}
{% block page_content %}
{% for item in links %}
<div class="page-header">
        <h1>{{ item.name }}
        <button type="button" id="new_btn" class="btn btn-link" name="{{ item.name }}" data-toggle="modal" data-target="#newModal">New</button>
</h1>
</div>
<div>
    <ul>
        {% for urlitem in item.list %}
        <li><a href="{{ urlitem.href }}" target="_blank">{{ urlitem.title }}</a>
            
            <button type="button" id="edit_btn" value="{{ urlitem.href }}" name="{{ loop.index }}/{{ item.name }}/{{ urlitem.title }}" class="btn btn-link" data-toggle="modal" data-target="#editModal">Edit</button>
             <button type="button" id="del_btn" value="{{ urlitem.href }}" name="{{ item.name }}/{{ urlitem.title }}" class="btn btn-link" data-toggle="modal" data-target="#deleteModal">Delete</button>
         </li>
        {% endfor %}
    </ul>
</div>

<div class="modal fade" id="editModal" tabindex="1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
	<div class="modal-dialog" role>
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="editModalLabel">
					Edit
				</h4>
			</div>
			<div class="modal-body">
			<form>
                            <div class="form-group">
                                <label id="title_label" for="title_text" class="control-label">Title:</label>
                                <input type="text" class="form-control" id="title_text" onchange="does_changed()">
                            </div>
                            <div class="form-group">
                                <label id="href_label" for="href_text" class="control-label">Href</label>
                                <input type="text" class="form-control" id="href_text" onchange="does_changed()"></text>
                            </div>
                        </form> 
			</div><!-- form --!>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel
				</button>
				<button type="button" id="save_btn" class="btn btn-primary" disabled="disabled" data-dismiss="modal" onclick="editLink()">
					Save
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>


<div class="modal fade" id="deleteModal" tabindex="1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role>
                <div class="modal-content">
                        <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                </button>
                                <h4 class="modal-title" id="deleteModalLabel">
                                        Delete link
                                </h4>
                        </div>
                        <div class="modal-body"> Are you sure to delete the selected link?
                        </div> 
                        <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel
                                </button>
                                <button type="button" id="ok_btn" class="btn btn-primary" data-dismiss="modal" onclick="deleteLink(this)">
                                        OK
                                </button>
                        </div>
                </div><!-- /.modal-content -->
        </div><!-- /.modal -->
</div>


<div class="modal fade" id="newModal" tabindex="1" role="dialog" aria-labelledby="newModalLabel" aria-hidden="true">
        <div class="modal-dialog" role>
                <div class="modal-content">
                        <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                </button>
                                <h4 class="modal-title" id="newModalLabel">
                                        New
                                </h4>
                        </div>
                        <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label id="newtitle_label" for="newtitle_text" class="control-label">Title:</label>
                                <input type="text" class="form-control" id="newtitle_text">
                            </div>
                            <div class="form-group">
                                <label id="newhref_label" for="newhref_text" class="control-label">Href</label>
                                <input type="text" class="form-control" id="newhref_text"></text>
                            </div>
                        </form>
                        </div>
        </div><!-- /.modal -->
</div>


{% endfor %}
<p></p>

{% endblock %}

{% block scripts %}
{{ super() }}
<script>
   $(function () {
       $('#editModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget)
        var old_href = $(button)["0"].value
        var old_title = $(button)["0"].name.split("/")["2"]
        var loop = $(button)["0"].name.split("/")["0"]
        var section = $(button)["0"].name.split("/")["1"]
        $('#href_text').val(old_href)
        $('#title_text').val(old_title)
        $('#title_label')["0"].value = old_title
        $('#href_label')["0"].value = old_href
        $('#title_label')["0"].name = loop
        $('#href_label')["0"].value = section
        console.log($('#href_text'))
      } ) 

     $('#deleteModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget)
        var name = $(button)["0"].name
        var href = $(button)["0"].value
        $('#ok_btn')["0"].name = name
        $('#ok_btn')["0"].value = href
        console.log($('#ok_btn'))
      } )     

     $('#newModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget)
        var name = $(button)["0"].name
        $('#add_btn')["0"].name = name
        console.log($('#add_btn'))
      } )    


   });
   
    function editLink()
    {
        var titleName = $('#title_text')["0"].value
        var hrefName = $('#href_text')["0"].value
        var sectionName = $('#href_label')["0"].value
        var loop = $('#title_label')["0"].name
        console.log(sectionName);
        var linkdata = {"pos":loop,"section": sectionName,"link": titleName, "href":hrefName}
        console.log(linkdata);  
        obj=$.ajax({
            type: 'POST',
            url: '/management/admin/edit',
            async: true,
            dataType: "text",
            data: linkdata,    
            success: function (data, textStatus, jqXHR) {
                window.location.reload();
                console.log(textStatus);
                },
            error: function(){
                console.log("Failed to edit links!");
            }
        });
        
    }
    function does_changed()
    {
      console.log($('#href_text'));
      console.log($('#href_label'));
      if($('#href_text')["0"].value == $('#href_label')["0"].value && $('#title_text')["0"].value == $('#title_label')["0"].value) 
            $('#save_btn').prop("disabled", true)
      else
         $('#save_btn').prop("disabled", false)              
    }

    function deleteLink(obj)
    { 
        var linkStr = $(obj)["0"].name.split("/")
        sectionName = linkStr["0"]
        linkName = linkStr["1"]
        hrefName = $(obj)["0"].value
        var linkdata = {"section": sectionName,"link": linkName, "href":hrefName}
        console.log(linkdata);  
        obj=$.ajax({
            type: 'POST',
            url: '/management/admin/delete',
            async: true,
            dataType: "text",
            data: linkdata,    
            success: function (data, textStatus, jqXHR) {
                window.location.reload();
                console.log(textStatus);
                },
            error: function(){
                console.log("Failed to delete links!");
            }
        });
        
    }
    
    function newLink()
    {
        var title = $('#newtitle_text')["0"].value
        var section = $('#add_btn')["0"].name
        var href = $('#newhref_text')["0"].value
        console.log($('#add_btn'))
        var linkdata = {"section": section,"link": title, "href":href}
        console.log(linkdata)
        if(title.length != 0 && href.length != 0)
        {
          obj=$.ajax({
            type: 'POST',
            url: '/management/admin/new',
            async: true,
            dataType: "text",
            data: linkdata,    
            success: function (data, textStatus, jqXHR) {
                window.location.reload();
                console.log(textStatus);
                },
            error: function(){
                console.log("Failed to edit links!");
            }
        });

        }
    }
</script>
{% endblock %}


